<template>
  <div class="orderList">
    <el-row :span="24" class="orderTab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- all order -->
        <el-tab-pane label="全部订单" name="all">
          <el-col :span="24" class="orderBox" v-for="item in orderInfo">
            <el-col :span="24" class="topInfo">
              <div class="title">{{ item.orderName }}</div>
              <div class="status" v-if="item.status === 1">待付款</div>
              <div class="status" v-if="item.status === 2">待发货</div>
              <div class="status" v-if="item.status === 3">待收货</div>
            </el-col>
            <el-col :span="24" class="orderContent">
              <el-col :span="6" class="contentImg"></el-col>
              <el-col :span="18" class="contentDesc">
                <div class="title">{{ item.productName }}</div>
                <div class="type">型号：{{ item.type }}</div>
                <div class="others">
                  <div class="price">RMB：{{ item.price }}</div>
                  <div class="amount">× {{ item.amount }}</div>
                </div>
              </el-col>
              <el-col :span="24" class="sumRow">
                合计：<span class="sum">{{ item.sum }}</span>(含运费：<span>{{ item.postage }}</span>元)
              </el-col>
              <el-col class="action">
                <el-button v-if="item.status !== 1">查看物流</el-button>
                <el-button type="danger" v-if="item.status === 1">立即付款</el-button>
                <el-button v-if="item.status === 2">等待发货</el-button>
                <el-button type="danger" v-if="item.status === 3">确认收货</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-tab-pane>
        <!-- unpaied -->
        <el-tab-pane label="待付款" name="unpaied">
          <el-col :span="24" class="orderBox" v-for="item in orderInfo" v-if="item.status === 1">
            <el-col :span="24" class="topInfo">
              <div class="title">{{ item.orderName }}</div>
              <div class="status" v-if="item.status === 1">待付款</div>
            </el-col>
            <el-col :span="24" class="orderContent">
              <el-col :span="6" class="contentImg"></el-col>
              <el-col :span="18" class="contentDesc">
                <div class="title">{{ item.productName }}</div>
                <div class="type">型号：{{ item.type }}</div>
                <div class="others">
                  <div class="price">RMB：{{ item.price }}</div>
                  <div class="amount">× {{ item.amount }}</div>
                </div>
              </el-col>
              <el-col :span="24" class="sumRow">
                合计：<span class="sum">{{ item.sum }}</span>(含运费：<span>{{ item.postage }}</span>元)
              </el-col>
              <el-col class="action">
                <el-button v-if="item.status !== 1">查看物流</el-button>
                <el-button type="danger" v-if="item.status === 1">立即付款</el-button>
                <el-button v-if="item.status === 2">等待发货</el-button>
                <el-button type="danger" v-if="item.status === 3">确认收货</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-tab-pane>
        <!-- unshipped -->
        <el-tab-pane label="待发货" name="unshipped">
          <el-col :span="24" class="orderBox" v-for="item in orderInfo" v-if="item.status === 2">
            <el-col :span="24" class="topInfo">
              <div class="title">{{ item.orderName }}</div>
              <div class="status" v-if="item.status === 2">待发货</div>
            </el-col>
            <el-col :span="24" class="orderContent">
              <el-col :span="6" class="contentImg"></el-col>
              <el-col :span="18" class="contentDesc">
                <div class="title">{{ item.productName }}</div>
                <div class="type">型号：{{ item.type }}</div>
                <div class="others">
                  <div class="price">RMB：{{ item.price }}</div>
                  <div class="amount">× {{ item.amount }}</div>
                </div>
              </el-col>
              <el-col :span="24" class="sumRow">
                合计：<span class="sum">{{ item.sum }}</span>(含运费：<span>{{ item.postage }}</span>元)
              </el-col>
              <el-col class="action">
                <el-button v-if="item.status !== 1">查看物流</el-button>
                <el-button type="danger" v-if="item.status === 1">立即付款</el-button>
                <el-button v-if="item.status === 2">等待发货</el-button>
                <el-button type="danger" v-if="item.status === 3">确认收货</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-tab-pane>
        <!-- unsigned -->
        <el-tab-pane label="待收货" name="unSigned">
          <el-col :span="24" class="orderBox" v-for="item in orderInfo" v-if="item.status === 3">
            <el-col :span="24" class="topInfo">
              <div class="title">{{ item.orderName }}</div>
              <div class="status" v-if="item.status === 3">待收货</div>
            </el-col>
            <el-col :span="24" class="orderContent">
              <el-col :span="6" class="contentImg"></el-col>
              <el-col :span="18" class="contentDesc">
                <div class="title">{{ item.productName }}</div>
                <div class="type">型号：{{ item.type }}</div>
                <div class="others">
                  <div class="price">RMB：{{ item.price }}</div>
                  <div class="amount">× {{ item.amount }}</div>
                </div>
              </el-col>
              <el-col :span="24" class="sumRow">
                合计：<span class="sum">{{ item.sum }}</span>(含运费：<span>{{ item.postage }}</span>元)
              </el-col>
              <el-col class="action">
                <el-button v-if="item.status !== 1">查看物流</el-button>
                <el-button type="danger" v-if="item.status === 1">立即付款</el-button>
                <el-button type="danger" v-if="item.status === 2">等待发货</el-button>
                <el-button type="danger" v-if="item.status === 3">确认收货</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  beforeCreate () {
      // 获取我的订单
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/orderList.shtml', {pageSize: 100, pageNow: 1, token: this.$store.state.token}, { // 头文件及JSON格式设定
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => { // 数据获取成功
      this.$message({
        message: '数据获取成功',
        type: 'success',
        duration: 1000,
        showClose: false
      })
    }, (ne) => { // 数据获取失败
      this.$message({
        message: '数据获取失败',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  data () {
    return {
      activeName: 'all', // 默认选中的内容
      orderInfo: [ // 订单信息 status 1 待付款 2 待收货 3 已完成
        { orderName: '一号', productName: '草本植物精华', type: '123', price: 3888, amount: 1, postage: 10, status: 1, sum: 3888 },
        { orderName: '二号', productName: '草本植物精华', type: '123', price: 1000, amount: 2, postage: 20, status: 2, sum: 2000 },
        { orderName: '三号', productName: '草本植物精华', type: '123', price: 600, amount: 2, postage: 20, status: 3, sum: 1200 }
      ]
    }
  },
  methods: {
    handleClick (tab, event) { // 订单状态切换
      console.log(tab)
      console.log(event)
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.orderList {
  font-size: 14px;
  .orderTab {
    background-color: #fff;
    .is-active {
      color: green;
    }
    .el-tabs {
      background-color: #eee;
      .el-tabs__header {
        margin-bottom: 0;
        background-color: #fff;
      }
      .el-tabs__content {
        background-color: #eee;
      }
    }
    .el-tabs__active-bar {
      background-color: green;
    }
    .el-tab-pane {
      height: 500px;
    }
  }
  .orderBox {
    margin-bottom: 10px;
    background-color: #fff;
    .topInfo {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      line-height: 30px;
      .title {}
      .status {
        color: red;
      }
    }
    .orderContent {
      background-color: #eee;
      // margin-bottom: 10px;
      text-align: left;
      .contentImg {
        width: 80px;
        height: 80px;
        border: 1px solid #999;
        margin: 10px;
      }
      .contentDesc {
        padding-left: 20px;
        line-height: 25px;
        padding: 10px;
        .others {
          display: flex;
          justify-content: space-between;
        }
      }
      .sumRow {
        text-align: right;
        background-color: #fff;
        padding: 5px 0;
        .sum {
          color: red;
        }
      }
      .action {
        background-color: #fff;
        padding: 10px;
        text-align: right;
        border-top: 1px solid #e3e3e3;
      }
    }
  }
}
</style>
